<template>
  <div class="mod-config">
    <basic-container>
        <navigationZhuanX :sign="{a:false,b:false,c:false,d:false,e:true}"></navigationZhuanX>
        <div class="boxsty zhiBiao">
            <div  :height="searchheight" >
                <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
                <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /> </span>
                <div  v-show="searchadvanced" >
                    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"  class="form-inline">
                        <el-form-item label="工作名称">
                            <el-input v-model="dataForm.workName" placeholder="工作名称" :clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名">
                            <el-input v-model="dataForm.cyryname" placeholder="姓名" :clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item label="职务">
                            <el-input v-model="dataForm.duties" placeholder="职务" :clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item label="结束时间">
                            <el-date-picker
                                v-model="dataForm.value1"
                                type="date"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-search" type="primary" class="marginLeft"
                                        @click="getDataList(1)">检索
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div>
                专项工作
                <div style="float:right">
                    <el-button type="primary">导出</el-button>
                </div>
            </div>
            <el-table
                style="width: 100%;margin-top:20px"
                :data="dataList"
                border
                v-loading="dataListLoading">
                <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column>
                <el-table-column type="index" width="80" header-align="center" align="center" label="序号"></el-table-column>
                <el-table-column
                    prop="workName"
                    header-align="center"
                    align="center"
                    min-width="100"
                    label="工作名称">
                </el-table-column>
                <el-table-column
                    prop="cyryname"
                    header-align="center"
                    align="center"
                    min-width="100"
                    label="姓名">
                </el-table-column>
                <el-table-column
                    prop="duties"
                    header-align="center"
                    align="center"
                    min-width="100"
                    label="职务">
                </el-table-column>
                <el-table-column
                    prop="endDate"
                    header-align="center"
                    align="center"
                    min-width="100"
                    label="结束时间">
                </el-table-column>
                <el-table-column
                    prop="shryname"
                    min-width="100"
                    header-align="center"
                    align="center"
                    label="审核人">
                  <template slot-scope="scope">
                    <div v-for="(item,index) in cutout(scope.row.shryname).slice(0, 2)">
                      <el-tooltip class="item" :disabled="cutout(scope.row.shryname).length<3" effect="dark" :content="scope.row.shryname" placement="top-start">
                        <span>{{item}}<span v-if="cutout(scope.row.shryname).length>2&&index==1">...</span></span>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="huizongScore"
                    min-width="100"
                    header-align="center"
                    align="center"
                    label="得分">
                  <template slot-scope="scope">
                    <el-popover
                      placement="left"
                      width="300"
                      trigger="hover">
                      <el-table :data="scope.row.gridData">
                        <el-table-column min-width="90" property="pfr" label="打分人"></el-table-column>
                        <el-table-column min-width="90" property="score" label="得分"></el-table-column>
                      </el-table>
                      <div slot="reference" class="name-wrapper">
                        <span  style="cursor: pointer;">{{scope.row.huizongScore}}</span>
                      </div>
                    </el-popover>
                  </template>
                </el-table-column>

            </el-table>
        </div>
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
    </basic-container>
  </div>
</template>

<script>

import {resultList} from "@/api/hetongrenwu/zhuanxianggongzuo/zxgztianbao";

export default {
    components:{

    },
    data(){
        return{
            form:{},
            searchadvanced: true,
            searchheight: '0',
            dataForm:{},
            showZhong:1,
            dataList:[],
            dataListLoading:false
        }
    },
    created() {
      this.getDataList()
    },
    methods:{
        searchchangeadvanced() {
            this.searchadvanced = !this.searchadvanced;
            if(this.searchadvanced){
                this.searchheight= 'auto'
            }
        },
        // 获取数据列表
        getDataList() {
          this.dataListLoading = true
          resultList(Object.assign({
            type:this.radio,
            workName:this.dataForm.workName,
            cyryname:this.dataForm.cyryname,
            duties:this.dataForm.duties,
            endDate:this.dataForm.endDate,
            current: this.pageIndex,
            size: this.pageSize
          })).then(response => {
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
          })
          this.dataListLoading = false
        },
        // 每页数
        sizeChangeHandle(val) {
          this.pageSize = val
          this.pageIndex = 1
          this.getDataList()
        },
        // 当前页
        currentChangeHandle(val) {
          this.pageIndex = val
          this.getDataList()
        },
    cutout(cellValue) {
      if (cellValue) {
        var c = cellValue.split(",");
        if(c.size<1){
          c.push('-');
          c.push('-');
        } else if(c.size<2){
          c.push('-');
        }
        return c;
      }
    },
    }
}
</script>

<style>

</style>
